{% extends "base.html" %}

{% block content %}
  <div class="container-fluid p-5">
    <div class="row justify-content-center">
      <div class="col-md-8 text-center">
        <!-- 404 图标与标题 -->
        <div class="mb-5">
          <div class="d-inline-block p-4 rounded-circle bg-danger/10 text-danger mb-4">
            <i class="fa fa-exclamation-triangle fa-5x"></i>
          </div>
          <h1 class="display-1 fw-bold text-secondary mb-2">404</h1>
          <h3 class="text-dark">页面不存在</h3>
        </div>

        <!-- 错误信息 -->
        <div class="bg-light p-5 rounded-lg mb-6">
          <p class="text-secondary mb-0">
            抱歉，您访问的页面不存在、已被删除或暂时无法访问。<br>
            可能是 URL 输入错误或页面已迁移。
          </p>
        </div>

        <!-- 操作按钮 -->
        <div class="d-flex justify-content-center gap-3">
          <a href="/home" class="btn btn-primary px-5">
            <i class="fa fa-home me-2"></i>返回首页
          </a>
          <button class="btn btn-secondary px-5" onclick="history.back()">
            <i class="fa fa-arrow-left me-2"></i>返回上一页
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 自定义动画样式 -->
  <style>
    @keyframes float {
      0% {
        transform: translateY(0px);
      }
      50% {
        transform: translateY(-15px);
      }
      100% {
        transform: translateY(0px);
      }
    }

    .fa-exclamation-triangle {
      animation: float 3s ease-in-out infinite;
    }
  </style>
{% endblock %}